<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="/WEB-INF/layouts/standard.xhtml">
        <ui:define name="content">
          <div class="pleft">
               <h:form  prependId="false">
                <p:growl id="growl" showDetail="true"/> 
                <p:dataTable var="usr" value="#{tableBean.listUsers}" paginator="true" rows="5"
                   selection="#{tableBean.selectedUser}" selectionMode="single"                  
                  onRowSelectUpdate="display growl"  
                  onRowSelectComplete="usrDialog.show()"                   
                  onRowUnselectUpdate="growl">
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="User Name" />
                        </f:facet>
                        <h:outputText value="#{usr.username}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Last Name" />
                        </f:facet>
                        <h:outputText value="#{usr.lastname}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="First Name" />
                        </f:facet>
                        <h:outputText value="#{usr.firstname}" />
                    </p:column>              
                    <!--<p:column style="width:10px">
                        <p:commandButton update="detail" oncomplete="usrDialog.show()" image="ui-icon ui-icon-search" >
                            <f:setPropertyActionListener value="#{usr}" target="#{tableBean.selectedUser}"  />
                        </p:commandButton>
                    </p:column>
                --></p:dataTable>       
                       
                <p:dialog header="User Detail" widgetVar="usrDialog" resizable="false"
                           id="detail" width="200" showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">
                        <h:outputText value="User Name:" />
                        <h:outputText value="#{tableBean.selectedUser.username}" style="font-weight:bold"/>

                        <h:outputText value="Last name:" />
                        <h:outputText value="#{tableBean.selectedUser.lastname}" style="font-weight:bold"/>

                        <h:outputText value="First name:" />
                        <h:outputText value="#{tableBean.selectedUser.firstname}" style="font-weight:bold"/>

                        <h:outputText value="Age:" />
                        <h:outputText value="#{tableBean.selectedUser.age}" style="font-weight:bold"/>
                        
                        <h:outputText value="Desciption:" />
                        <h:outputText value="#{tableBean.selectedUser.desc}" style="font-weight:bold"/>
                    </h:panelGrid>
                </p:dialog>
           </h:form> 
            </div>  
             <div class="ptop">
               <h:form id ="frm3">
                <span class="ui-breadcrumb-chevron ui-icon ui-icon-triangle-1-e" />
                <h:commandLink value="DataTable 4" action="datatable4"/>
                <h:outputText value=" -   Filter - Sort data" />
                </h:form>
             </div>      
        </ui:define>
    </ui:composition>
</html>